<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客列表页</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/list.css">

</head>

<body>
    <div class="nav">
        <img src="pic/logo2.jpg" alt="">
        <span class="blog-title">小粮博客</span>
        <div class="space"></div>

        <div class="search-container">
            <input type="text" value="" class="search-input" placeholder="输入关键字..." id="searchInput"
                aria-label="Search in website">
            <button class="search-btn" onclick="handleSearch()">搜索</button>
        </div>

        <a class="nav-span" href="blog_list.html">主页</a>
        <a class="nav-span" href="blog_edit.html">写博客</a>
        <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="container">
        <div class="left">
            <div class="card">
                <img src="pic/avatar01.jpeg" alt="" id="avatar_img">
                <h3></h3>
                <a href="#" id="myLink">GitHub 地址</a>
                <div class="row">
                    <span id="article">文章</span>
                    <span id="sort">分类</span>
                </div>
                <div class="row">
                    <span id="count">2</span>
                    <span id="kind">1</span>
                </div>
            </div>
        </div>
        <div class="right">
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script src="js/common.js"></script>

    <script>

// // 统一认证模块
// function checkAuth() {
//     return new Promise((resolve) => {
//         // 先检查本地token是否存在
//         if (!localStorage.getItem("user_token")) {
//             resolve(false);
//             return;
//         }

//         // 复用现有的用户信息接口完成验证
//         var url ="/user/getUserInfo"
//         getUserInfo(url)
//             .then(user => {
//                 // 成功获取用户信息说明token有效
//                 resolve(true);
//             })
//             .catch(error => {
//                 // 失败时清除无效token
//                 localStorage.removeItem("user_token");
//                 resolve(false);
//             });
//     });
// }

// // 使用示例
// async function initPage() {
//     const isAuth = await checkAuth();
//     console.log("认证结果:", isAuth);
    
//     if (isAuth) {
//         // 已登录状态的操作
//         getBlogList();
//     } else {
//         // 未登录状态的操作
//         handleNotLogin();
//     }
// }

// // 页面初始化
// initPage();

// 统一的权限校验方法（异步）
// async function checkAuth() {
//     const token = localStorage.getItem("user_token");
//     if (!token) return false;

//     try {
//         // 通过获取用户信息实际验证 token 有效性
//         var url = "/user/getUserInfo";
//         const user = await getUserInfo(); 
//         return !!user; // 成功获取用户信息说明 token 有效
//     } catch (error) {
//         // 清除无效 token
//         localStorage.removeItem("user_token");
//         return false;
//     }
// }

// // 改造后的列表构建函数
// async function listBuildBlogList(data) {
//     // 清空列表
//     $('.right').empty();
//     if (!data.length) {
//         $('.right').html('还没有帖子');
//         return;
//     }

//     // 实际校验登录状态
//     const isValid = await checkAuth(); 
//     let finalHtml = "";

//     data.forEach(blog => {
     
//                 // 构造HTML
//                 finalHtml += '<div class="blog">';
//                 finalHtml += '<div class="article_head">';
//                 finalHtml += '<div class="kind">标签：' + blog.kind + '</div> </br>';
//                 finalHtml += '<div class="username">作者：' + blog.userName + '</div>';
//                 finalHtml += '<div class="date">' + blog.updateTime + '</div>';
//                 finalHtml += '</div>';
//                 finalHtml += '<div class="title">' + blog.title + '</div>';
//                 finalHtml += '<div class="desc">' + blog.content + '</div>';
//                 // console.log("weiweii-isLoggedIn:", isLoggedIn);
//                 console.log("hasValidToken:",hasValidToken)
//         if (isValid) { // 使用统一校验结果
//             finalHtml += `<a class="detail" href="blog_detail.html?blogId=${blog.id}">查看全文&gt;&gt;</a>`;
//         } else {
//             finalHtml += `<a class="detail" href="javascript:void(0)" onclick="handleNotLogin()">登录后查看&gt;&gt;</a>`;
//         }
//         // ...
//     });

//     $(".right").html(finalHtml);
// }







        var url = "/user/getUserInfo";
        getUserInfo(url);

        //========================= 搜索功能 =======================
        function handleSearch() {
            const keyword = $('#searchInput').val().trim();

            // const keyword = document.getElementById('searchInput').value;
            $.ajax({
                type: 'get',
                url: '/blog/selectByTitleKey',
                data: {
                    titleKey: keyword,
                    // contentKey: keyword 
                },
                success: function (respData) {
                    if (respData.code == 200) {
                        // console.log("搜索功能respData.data.data: ", respData.data.data);

                        console.log("搜索 listBuildArticleList:", respData.data);
                        listBuildBlogList(respData.data);
                    } else {
                        //提示信息
                        console.log("搜索失败")
                    }
                },
                //失败回调
                error: function () {
                    $.toast({
                        heading: '错误',
                        text: '访问出现问题，请与管理员联系',
                        icon: 'error'
                    });
                }
            });
        }





        // async function initPage() {
        //     try {
        //         var url = "/user/getUserInfo"
        //         // 1. 先确认用户登录状态（等待完成）
        //         const userData = await getUserInfo(url);
        //         // console.log("当前登录状态:", isLoggedIn); // 此时为 true

        //         // 2. 再获取博客列表（确保 isLoggedIn 已更新）
        //         await getBlogList();
        //     } catch (error) {
        //         console.error("页面初始化失败:", error);
        //     }
        // }

        //页面加载时启动
        // initPage();

        var url = "/blog/findCountById"
        findCount(url);
        var url1 = "/blog/selectKindById"
        findKind(url1);

        getBlogList();


        // ========================= 构造帖子列表 =======================
        function listBuildBlogList(data) {
            //清空列表数据
            $('.right').empty();
            if (data.length == 0) {
                $('.right').html('还没有帖子');
                return;
            }
            // 默认头像路径
            let avatarUrl = 'image/avatar01.jpeg';
            var finalHtml = "";
            // 遍历结果
            data.forEach(blog => {
                console.log("blog: ",blog);
                // 构造HTML
                finalHtml += '<div class="blog">';
                finalHtml += '<div class="article_head">';
                finalHtml += '<div class="kind">标签：' + blog.kind + '</div> </br>';
                finalHtml += '<div class="username">作者：' + blog.userName + '</div>';
                finalHtml += '<div class="date">' + blog.updateTime + '</div>';
                finalHtml += '</div>';
                finalHtml += '<div class="title">' + blog.title + '</div>';
                finalHtml += '<div class="desc">' + blog.content + '</div>';
                // console.log("weiweii-isLoggedIn:", isLoggedIn);
                console.log("hasValidToken:",hasValidToken)
                if (hasValidToken()) {
                    console.log("进去")
                    finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>';
                    // finalHtml += '<a class="detail" href="blog_detail.html?blogId=14295">查看全文&gt;&gt;</a>';
                } else {
                    finalHtml += '<a class="detail" href="javascript:void(0)" onclick="handleNotLogin()">登录后查看&gt;&gt;</a>';
                }

                finalHtml += '</div>';

                $(".right").html(finalHtml);


            });
        }


        function getBlogList() {
            // return new Promise((resolve, reject) => {
                $.ajax({
                    type: "get",
                    url: "/blog/getList",
                    success: function (result) {
                        console.log("getBlogList: ", result.data);

                        if (result.code == 200 && result.data != null && result.data.length != 0) {
                            // $(".right").html("还没有一篇博客哦~");

                            var blogs = result.data;
                            var finalHtml = "";
                            for (var blog of blogs) {
                                finalHtml += '<div class="blog">';
                                finalHtml += '<div class="article_head">';
                                finalHtml += '<div class="kind">标签：' + blog.kind + '</div> </br>';
                                finalHtml += '<div class="username">作者：' + blog.userName + '</div>';
                                finalHtml += '<div class="date">' + blog.updateTime + '</div>';
                                finalHtml += '</div>';
                                finalHtml += '<div class="title">' + blog.title + '</div>';
                                finalHtml += '<div class="desc">' + blog.content + '</div>';
                                // console.log("weiweii-isLoggedIn:", isLoggedIn);
                                if (hasValidToken()) {
                                    finalHtml += '<a class="detail" href="blog_detail.html?blogId=' + blog.id + '">查看全文&gt;&gt;</a>';
                                } else {
                                    finalHtml += '<a class="detail" href="javascript:void(0)" onclick="handleNotLogin()">登录后查看&gt;&gt;</a>';
                                }
                                finalHtml += '</div>';
                            }
                            $(".right").html(finalHtml);
                            // resolve(result.data);
                        } else {
                            // reject(new Error(result.message));
                            console.log("还没有一篇博客哦");
                            $(".right").html("还没有一篇博客哦~");
                        }
                    },
                    error: function (error) {
                        if (error.status == 401) {
                            // location.href = "blog_login.html";
                            handleNotLogin();
                        }
                    }
                });
            // });
        }

        // 检查本地是否存在有效 token（同步）
        function hasValidToken() {
            return localStorage.getItem("user_token") !== null;
        }

        // ======================== 工具函数 ========================
        // 日期格式化工具
    //     const formatTime = (timestamp) => {
    //         const date = new Date(timestamp);
    //         return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    //     }

    //     // 通用列表构造器
    //     const buildBlogListHTML = (blogs) => {
    //         console.log("blogs.length:",blogs.length)
    //         if (!blogs.length) return '<div class="no-data">暂无相关博客</div>';

    //         const hasToken = hasValidToken();
    //         console.log(" hasToken", hasToken);
    //         const defaultAvatar = 'image/avatar01.jpeg';

    //         return blogs.map(blog =>
    //         // console.log('当前博客对象:', blog));
    // //        console.log('包含的 ID:', blog.id); // 重点检查 ID
         
    //  `
    //     <div class="blog">
    //         <div class="article_head">
    //             <span class="kind">标签：${blog.kind || '未分类'}</span>
    //             <div class="meta">
    //                 <span class="username">作者：${blog.userName || '匿名用户'}</span>
    //                 <time class="date">${formatTime(blog.updateTime)}</time>
    //             </div>
    //         </div>
    //         <h3 class="title">${blog.title || '无标题'}</h3>
    //         <div class="desc">${blog.content?.substring(0, 100) || '暂无内容摘要'}...</div>
    //          ${hasToken
    //                 ? `<a class="detail" href="blog_detail.html?blogId=${blog.id}">查看全文&gt;&gt;</a>`
    //                 // ? `<a class="detail" href="blog_detail.html?`+"location.search">+"查看全文&gt;&gt;</a>"
    //                 : `<a class="detail" href="javascript:void(0)" onclick="handleNotLogin()">登录后查看&gt;&gt;</a>`
    //             }
    //     </div>
    // `).join('');
    //     }
    //     // console.log("blogs: ",blogs)

    //     // ======================== 核心功能 ========================
    //     async function handleSearch() {
    //         try {
    //             const keyword = $('#searchInput').val().trim();
    //             if (!keyword) {
    //                 showToast('请输入搜索关键词', 'warning');
    //                 return;
    //             }

    //             const { data } = await $.ajax({
    //                 type: 'GET',
    //                 url: '/blog/selectByTitleKey',
    //                 data: { titleKey: keyword }
    //             });
    //             console.log("搜索关键词data:",data)
    //             $('.right').html(buildBlogListHTML(data || []));

    //         } catch (error) {
    //             console.error('搜索失败:', error);
    //             showToast(error.responseJSON?.message || '搜索服务不可用', 'error');
    //         }
    //     }

    //     async function fetchBlogList() {
    //         try {
    //             const { data } = await $.ajax({
    //                 type: "GET",
    //                 url: "/blog/getList"
    //             });

    //             $(".right").html(
    //                 buildBlogListHTML(data || [])
    //             );

    //         } catch (error) {
    //             console.error('获取博客列表失败:', error);
    //             if (error.status === 401) handleNotLogin();
    //             else showToast('加载失败，请刷新重试', 'error');
    //         }
    //     }

    //     // ======================== 工具方法 ========================
    //     function showToast(text, icon = 'info') {
    //         $.toast({
    //             text: text,
    //             icon: icon,
    //             hideAfter: 3000
    //         });
    //     }

    //     function hasValidToken() {
    //         return !!localStorage.getItem("user_token");
    //     }

    //     // ======================== 初始化 ========================
    //     $(document).ready(function () {
    //         fetchBlogList();
    //         $('#searchInput').on('keypress', e => {
    //             if (e.which === 13) handleSearch();
    //         });
    //     });

    </script>
</body>

</html>